<template>
  <div id="city">
    <head-top go-back="ture" :headTitle="cityname">
      <router-link to="/home" slot="changecity" class="change-city"
        >切换城市
      </router-link>
    </head-top>
    <div class="address-form-container">
      <div class="address-form">
        <van-form class="form">
          <van-field
            type="search"
            v-model="inputVaule"
            name="搜索地址"
            placeholder="输入学校、商务楼、地址"
            :rules="[{ required: true }]"
          />
          <div>
            <van-button
              block
              type="info"
              native-type="submit"
              @click="postpois"
            >
              提交
            </van-button>
          </div>
        </van-form>
      </div>
    </div>
    <header v-if="historytitle" class="search-history">搜索历史</header>
    <ul class="getpois_ul">
      <li
        class="getpois_li"
        v-for="(item, index) in placelist"
        :key="index"
        @click="nextpage(index, item.geohash)"
      >
        <h4 class="pois_name ellipsis">{{ item.name }}</h4>
        <p class="pois_address ellipsis">{{ item.address }}</p>
      </li>
    </ul>
    <div
      class="clear-all"
      v-if="historytitle && placelist.length"
      @click="clearAll"
    >
      清空所有
    </div>
  </div>
</template>

<script>
import headTop from "@/components/header/head";
import { getStore, setStore, removeStore } from "@/config/mUtils";
import { currentCity, searchplace } from "@/network/getData";
import { Form, Field, Button } from "vant";
export default {
  name: "city",
  data() {
    return {
      inputVaule: "",
      cityid: "", //当前城市id
      cityname: "", //当前城市名称
      placelist: [], // 搜索城市列表
      placeHistory: [], // 历史搜索记录
      historytitle: true, // 默认显示搜索历史头部，点击搜索后隐藏
      placeNone: false, // 搜索无结果，显示提示信息
    };
  },
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    headTop,
  },
  created() {},
  mounted() {
    this.cityid = this.$route.params.city_id;
    currentCity(this.cityid).then((res) => {
      this.cityname = res.name;
    });
    this.initData();
  },
  methods: {
    initData() {
      //获取搜索历史记录
      if (getStore("placeHistory")) {
        this.placelist = JSON.parse(getStore("placeHistory"));
      } else {
        this.placelist = [];
      }
    },
    postpois() {
      if (this.inputVaule) {
        searchplace(this.cityid, this.inputVaule).then((res) => {
          this.historytitle = false;
          this.placelist = res;
          this.placeNone = res.length ? false : true;
        });
      }
    },
    /**
     * 点击搜索结果进入下一页面时进行判断是否已经有一样的历史记录
     * 如果没有则新增，如果有则不做重复储存，判断完成后进入下一页
     */
    nextpage(index, geohash) {
      let history = getStore("placeHistory");
      let choosePlace = this.placelist[index];
      if (history) {
        let checkrepeat = false;
        this.placeHistory = JSON.parse(history);
        this.placeHistory.forEach((item) => {
          if (item.geohash == geohash) {
            checkrepeat = true;
          }
        });
        if (!checkrepeat) {
          this.placeHistory.push(choosePlace);
        }
      } else {
        this.placeHistory.push(choosePlace);
      }
      setStore("placeHistory", this.placeHistory);
      this.$router.push({ path: "/msite", query: { geohash } });
    },
    clearAll() {
      removeStore("placeHistory");
      this.initData();
    },
  },
};
</script>
<style lang='scss' scoped>
@import '@/style/mixin';

.change-city {
  right: .5rem;

  color: #fff;

  font-size: .6rem;

@include ct;
}

.address-form-container {
  width: 100%;
  margin-top: 2.3rem;

  border-bottom: 2px solid #e4e4e4;
  background-color: #fff;
}

.address-form {
  width: 90%;
  margin: 0 auto;
  padding-top: .4rem;
}

::v-deep .van-field__control {
  height: 1.4rem;

  color: #333;

  line-height: 1.4rem;
}

::v-deep .van-field {
  height: 1.4rem;
  margin-bottom: .5rem;
  padding: 0 .5rem;

  border: 1px solid #e4e4e4;

  font-size: .65rem;
}

::v-deep .van-button {
  height: 1.4rem;
  margin-bottom: .5rem;
}

::v-deep .van-button__text {
  color: #fff;

  font-size: .65rem;
}

.search-history {
  padding-left: .5rem;

  border-bottom: 2px solid #e4e4e4;

  font-size: .5rem;
}

.getpois_li {
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  width: 100%;
  height: 2.35rem;
  padding-left: .75rem;

  border-bottom: 1px solid #e4e4e4;
  background-color: #fff;

  .pois_name {
    color: #333;

    font-size: .65rem;
  }

  .pois_address {
    color: #999;

    font-size: .45rem;
  }
}

.clear-all {
  height: 2rem;

  color: #666;
  background-color: #fff;

  font-size: .7rem;
  line-height: 2rem;

  text-align: center;
}

</style>
